<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- https://cdn.bootcdn.net/ajax/libs/pixi.js/8.12.0/pixi.js -->
    <script src="./assets/js/pixi_8.12.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 600px;
            border: 1px solid #ddd;


            canvas{
                height: 100%;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        async function start(){
            const app = new PIXI.Application()

            const WIDTH = 800;
            const HEIGHT = 600;

            await app.init({
                width: WIDTH,
                height: HEIGHT,
                antialias: true,
                backgroundColor: "#fff",
            })
            document.getElementById("container").appendChild(app.canvas)


            /**
             * pixijs绘制简单图形
             * 1. 线条
             * 2. 圆形
             * 3. 矩形
             * 
            **/

            const graphics = new PIXI.Graphics();

            graphics
                .moveTo(10, 10)
                .lineTo(40, 40)
                .stroke({color: 0xFF0000})

                .beginPath()
                .rect(50,50,100,100)
                .fill({color: 0xFF0000})
                .closePath()

                // .moveTo(250, 50)
                // .rect(150, 50, 50, 50)
                // .fill({ color: 0x00ff00 })
                // .moveTo(350, 50)    // Start a new shape
                // .circle(250, 75, 25)
                // .fill({ color: 0x0000ff });

            app.stage.addChild(graphics);

        }

        start()
        
    </script>
</body>
</html>